<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

<script>
    // Promise.all()   处理多请求并列(同时启动多个异步操作)


    // 多个异步操作同时启动   => 按顺序返回结果
    // var p1 = getNumAsync(1, 2000);
    // var p2 = getNumAsync(2, 1000);
    // var p3 = getNumAsync(3, 3000);

    // var list = [];
    // p1.then(function (arg) {
    //     console.log("fulfilled:", arg); // 1
    //     list.push(arg)
    //     return p2;  // {<pending>:undefined}  => 2s后  {<fulfilled>:2}
    // }).then(function (arg) {
    //     console.log("fulfilled:", arg); // 2
    //     list.push(arg)
    //     return p3;   // {<pending>:undefined}  => 3s后  {<fulfilled>:3}
    // }).then(function (arg) {
    //     console.log("fulfilled:", arg);  // 3
    //     list.push(arg);
    //     return list;
    // }).then(list => {
    //     console.log("全都成功", list);
    // }).catch(function (err) {
    //     console.log("rejeced", err);
    // })

    // ----------------------------------------------------------------------------

    // var p1 = getNumAsync(1, 2000, false);
    // var p2 = getNumAsync(2, 1000);
    // var p3 = getNumAsync(3, 3000);

    // var arr = [p1, p2, p3];  //多个Promise对象放到数组中
    // var p = new Promise(function (resolve, reject) {

    //     var list = [];
    //     var count = 0;
    //     for (let i = 0; i < arr.length; i++) {
    //         let item = arr[i];   // 每一个Promise对象
    //         item.then(arg => {
    //             // list.push(arg); //  先有结果的先放  [2,1,3]

    //             // then() catch() 方法中的回调函数 -> 需要等Promise对象状态改变之后 才会执行(异步) => 先执行主线程同步代码(i=3) => 等回调函数执行时 i = 3    
    //             // 怎么解决?
    //             // console.log("i", i);
    //             list[i] = arg;
    //             count++;

    //             console.log(i, list);
    //             // 等三个请求都成功之后  => 怎么把list传出去 (异步的基础上解决异步)

    //             if (count === arr.length) {  //全都成功
    //                 console.log("全都成功", list);

    //                 resolve(list);
    //             }

    //         }).catch(err => {
    //             // 抛出错误
    //             reject(err);
    //         })
    //     }
    // })


    // p.then(list => {
    //     console.log("fulfilled", list);
    // }).catch(err => {
    //     console.log("rejected", err);
    // })

    // ----------------------------------------------------------------


    Promise.myAll = function (arr) {  //  [p1, p2, p3]
        return new Promise(function (resolve, reject) {

            // var arr = [p1, p2, p3];  //多个Promise对象放到数组中
            var list = [];
            var count = 0;
            for (let i = 0; i < arr.length; i++) {
                let item = arr[i];   // 每一个Promise对象
                item.then(arg => {
                    // list.push(arg); //  先有结果的先放  [2,1,3]

                    // then() catch() 方法中的回调函数 -> 需要等Promise对象状态改变之后 才会执行(异步) => 先执行主线程同步代码(i=3) => 等回调函数执行时 i = 3    
                    // 怎么解决?
                    // console.log("i", i);
                    list[i] = arg;
                    count++;

                    // console.log(i, list);
                    // 等三个请求都成功之后  => 怎么把list传出去 (异步的基础上解决异步)

                    if (count === arr.length) {  //全都成功
                        // console.log("全都成功", list);

                        resolve(list);
                    }

                }).catch(err => {
                    // 抛出错误
                    reject(err);
                })
            }
        })
    }

    var p1 = getNumAsync(1, 2000);
    var p2 = getNumAsync(2, 1000);
    var p3 = getNumAsync(3, 3000);

    // var p = Promise.myAll([p1, p2, p3]);
    var p = Promise.all([p1, p2, p3]);

    p.then(list => {
        console.log("fulfilled", list);
    }).catch(err => {
        console.log("rejected", err);
    })







    function getNumAsync(num, delay = 0, isFulfilled = true) {
        var p = new Promise(function (resolve, reject) {
            setTimeout(function () {
                isFulfilled ? resolve(num) : reject(num);
            }, delay);
        });
        return p;
    }

</script>

</html>